<template>
  <div>
    <div class='container'></div>
    <el-tag type="primary">我的购物车</el-tag>
    <div style="float: right;margin: 10px">
      <el-input
          style="width: 280px"
          placeholder="请输入商品名称"
          suffix-icon="el-icon-search"
          v-model="name"
      ></el-input>
      <el-button class="ml-5" type="primary" @click="load"
      >搜索
      </el-button
      >
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div class='item' v-for="(item,index) in shopCar" :key="index">
      <div class='logo'>
        <img
            src="https://tse1-mm.cn.bing.net/th/id/R-C.1c44320eafe0d8fa96896fd89312f439?rik=4x340IPCxzQ7uw&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f160920%2f1-160920153S70-L.png&ehk=ki1BIJMoy4IFxcM%2fHMneOz6DNvAqDw6%2fi5x6zxa7q2k%3d&risl=&pid=ImgRaw&r=0">
        <span>{{ item.sproducer }}</span>
      </div>
      <div class='details'>
        <img :src="item.simage">
        <div class="details-list">
          <span>{{ item.sname }}</span>
          <div class='list-more'>
            <span>颜色分类:{{ item.scolor }}</span>
            <span>尺码:{{ item.commoditySize }}</span>
          </div>
          <div class='list-price'>
            单价：
            ￥{{ item.sprices - item.sdiscount }}
            数量：
            <el-button style="margin-right: 6px">{{ nums[index] }}</el-button>
            购买鞋码
                <el-tag type="primary">{{ sizes[index] }}</el-tag>
            小计：￥x
            {{ (item.sprices - item.sdiscount) * nums[index] }}
          </div>
        </div>
      </div>
      <div class='num'>
        <span>购买数量</span>
        <div>
          <el-button type="danger" icon="el-icon-delete" circle @click="del(item.sid)"></el-button>
        </div>
        <el-input-number v-model="nums[index]" @change="handleChange(index)" :min="0" :max="100"></el-input-number>
      </div>
    </div>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[1,2,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <div>
      <el-row style="float: right">


        <!--    如果总价为0 不显示-->
        <span v-if="totalPrice==0.00">
          <el-button @click="load">查看实际付款：</el-button>
        </span>
        <span v-else> 实际付款：<span style="color:red">￥{{ totalPrice }}</span></span>
        <div style="text-align: right; color: #999; font-size: 12px; margin-right: 85px">
          已优惠： - ￥{{ totaldiscount }}
        </div>
        <span>免运费</span>
        <button class='footer-right' @click="goBuy">立即付款</button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "shoppingCart",
  data() {
    return {
      nums: [],
      shopCar: [],
      sizes:[],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      name: "",
      user: JSON.parse(localStorage.getItem("user")) ? JSON.parse(localStorage.getItem("user")) : "",
      totalPrice: 0,
      totaldiscount: 0
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      if (!this.user.uid) {
        this.$message.error("请先登录")
      } else {
        axios.get("/shoppingcart/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name,
            uid: this.user.uid
          }
        }).then(res => {
          if (res.data.code === 201) {
            this.$message.error(res.data.msg)
          }
          this.shopCar = res.data.data.records
          this.total = res.data.data.total
          this.nums = res.data.data2[0]
          this.sizes = res.data.data2[1]
        })
      }
      this.getTotalPrice()
      this.gettotaldiscount()
    },

    reset() {
      this.name = "";
      this.load();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    handleChange(index) {
      console.log(this.shopCar)
      console.log("index=========================================================" + index)
      console.log("this.shopCar[index-1].sid" + this.shopCar[index].sid)
      console.log("this.nums[index]" + this.nums[index])
      axios.post("/shoppingcart/update?uid=" + this.user.uid + "&sid=" + this.shopCar[index].sid + "&scount=" + this.nums[index])
      this.getTotalPrice();
    },
    gettotaldiscount() {
      //总计
      let dis = 0;
      this.shopCar.forEach((item, index) => {
        dis += (item.sdiscount) * this.nums[index]
      })
      this.totaldiscount = dis.toFixed(2);
    },
    getTotalPrice() {
      //总计
      let price = 0;
      this.shopCar.forEach((item, index) => {
        price += (item.sprices - item.sdiscount) * this.nums[index]
      })
      this.totalPrice = price.toFixed(2);
    },
    goBuy() {
      localStorage.setItem("tableData", JSON.stringify(this.shopCar))
      this.$router.push({
        path: "/front/preOrder",
        query: {
          //tableData传参一刷新数据就变成object，不好
          totalPrice: this.totalPrice,
          totaldiscount: this.totaldiscount,
          nums: this.nums,
          //tableData: this.tableData
        }
      })
    },
    del(sid) {
      let uid = this.user.uid
      console.log(sid)
      axios.get("/shoppingcart/delete?uid=" + uid + "&sid=" + sid).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.load()
        } else {
          this.$message.error("出错")
        }
      })
    },

  },
}
</script>

<style type="text/css" scoped>
body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

header {
  height: 50px;
  width: 100%;
  position: fixed;
  left: 0;
  top: 60px;
  background: #fff;
  z-index: 999;
  border-bottom: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}

.container {
  background: #fff;
  padding: 26px;
}

.item {
  padding: 10px;
  width: 100%;
}

.container > .item + .item {
  border-top: 1px solid #58595b;
}

.logo {
  height: 40px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 20px;
  height: 20px;
}

.logo span {
  color: #888;
  font-size: 12px;
  margin-left: 20px;
}

.details {
  background: #fff;
  padding: 15px;
  display: flex;
  font-size: 12px;
}

.details img {
  width: 90px;
  height: 90px;
}

.details-list {
  margin-left: 15px;
  color: #888;
}

.list-more span {
  display: block;
  background: #ccc;
}

.list-price {
  font-size: 14px;
  float: right;
}

.num {
  color: #888;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.num button {
  width: 31px;
  height: 25px;
  background: #e0c0e0;
  color: #58595b;
  border: none;
  outline: none;
}

.num input {
  width: 37px;
  height: 25px;
  border: none;
  text-align: center;
  background: #fff;
}

footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 998;
  background: #fff;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}

.footer-right {
  background: red;
  color: #fff;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;

}
</style>
